<template>
  <div>
    <a-button type="primary" @click="openAddModal" style="margin-bottom: 10px;">添加</a-button>
    <a-table :columns="teacherRequirementColumns" :data-source="teacherRequirementData" row-key="key">
      <span slot="action" slot-scope="text, record">
        <span
          style="color: #028BE2; cursor: pointer; margin-right: 20px;"
          @click="openEditModal(record)"
        >编辑</span>
        <span
          style="color: #028BE2; cursor: pointer; margin-right: 20px;"
          @click="deleteTeacherRequirement(record.key)"
        >删除</span>
      </span>
    </a-table>

    <a-modal
      :visible="modalVisible"
      title="教师要求信息"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <div>
        <div>
          <span>教师姓名: </span>
          <a-input v-model="currentRecord.teacherName" />
        </div>
        <div>
          <span>允许排课节次: </span>
          <a-select mode="multiple" style="width:200px;" v-model="currentRecord.allowedSections">
            <a-select-option v-for="section in allSections" :key="section" :value="section">
              {{ section }}
            </a-select-option>
          </a-select>
        </div>
        <div>
          <span>是否尽量连续: </span>
          <a-switch v-model="currentRecord.isContinuous" />
        </div>
        <div>
          <span>日排课节次上限: </span>
          <a-input-number v-model="currentRecord.maxDailySections" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      teacherRequirementColumns: [
        {
          title: '教师姓名',
          dataIndex: 'teacherName',
          key: 'teacherName'
        },
        {
          title: '允许排课节次',
          dataIndex: 'allowedSections',
          key: 'allowedSections'
        },
        {
          title: '是否尽量连续',
          dataIndex: 'isContinuous',
          key: 'isContinuous',
          customRender: function (text, record) {
            return text === true ? '是' : '否';
          }
        },
        {
          title: '日排课节次上限',
          dataIndex: 'maxDailySections',
          key: 'maxDailySections'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 220,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      teacherRequirementData: [
        {
          key: '1',
          teacherName: '王芳',
          allowedSections: ['第3节', '第4节'],
          isContinuous: true,
          maxDailySections: 3
        }
      ],
      allSections: ['第1节', '第2节', '第3节', '第4节', '第5节'],
      modalVisible: false,
      currentRecord: {
        key: null,
        teacherName: '',
        allowedSections: [],
        isContinuous: false,
        maxDailySections: 0
      },
      isAdding: false
    };
  },
  methods: {
    openAddModal() {
      this.isAdding = true;
      this.currentRecord = {
        key: null,
        teacherName: '',
        allowedSections: [],
        isContinuous: false,
        maxDailySections: 0
      };
      this.modalVisible = true;
    },
    openEditModal(record) {
      this.isAdding = false;
      this.currentRecord = { ...record };
      this.modalVisible = true;
    },
    handleModalOk() {
      if (this.isAdding) {
        const newKey = String(Number(this.teacherRequirementData[this.teacherRequirementData.length - 1].key) + 1);
        this.teacherRequirementData.push({
          key: newKey,
          teacherName: this.currentRecord.teacherName,
          allowedSections: this.currentRecord.allowedSections,
          isContinuous: this.currentRecord.isContinuous,
          maxDailySections: this.currentRecord.maxDailySections
        });
      } else {
        const index = this.teacherRequirementData.findIndex(item => item.key === this.currentRecord.key);
        if (index!== -1) {
          // 使用 Vue.set 确保响应式更新
          Vue.set(this.teacherRequirementData, index, {
            ...this.teacherRequirementData[index],
            teacherName: this.currentRecord.teacherName,
            allowedSections: this.currentRecord.allowedSections,
            isContinuous: this.currentRecord.isContinuous,
            maxDailySections: this.currentRecord.maxDailySections
          });
        }
      }
      this.modalVisible = false;
    },
    handleModalCancel() {
      this.modalVisible = false;
    },
    deleteTeacherRequirement(key) {
      this.teacherRequirementData = this.teacherRequirementData.filter(item => item.key!== key);
    }
  }
};
</script>

<style scoped>
/* 可以添加一些样式 */
</style>    